<!DOCTYPE html>
<!-- saved from url=(0067)http://codelover.club/coursefiles/FhNb1Ob3Uu7lqBi3aSaGnUGnZ6sy.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 颜色名称 css2有17个，css3有140个，甚至我们也可以自己定义-->
    <div class="test-named-color">测试有名颜色</div>
    <!-- rgb,rgba颜色表示 -->
    <div class="test-rgb">测试rgb颜色</div>
    <!--请设计div和class，探究长短16进制颜色表示 -->
    <div class="test-hex-color"></div>
    <!--请设计div和class，探究hsl,hsla颜色表示 -->
    <div class="test-hsl"></div>
    <!--请设计div和class，探究不透明度opacity 并和rgba\hsla做效果比较-->
    <div class="test-opacity">  和</div>
    <style>
        div {
            /* 给所有div中的文字一个统一的前景色 */
            border: 1px solid;
            margin-bottom: 6px;
            width: 200px;
            height: 100px;
            /* 画一个宽一些的边框，留意边框下的背景色 */
         
            /* div间隔 */
            
        }

        .test-opacity {
            background-color: red;
            transition: background-color 1s;
        }
        .test-opacity:hover{
            background-color: rgba(255, 0 0, 3);
        }
    </style>
    <hr>
    这是关键源码
    <pre>
    &lt!-- 颜色名称 css2有17个，css3有140个，甚至我们也可以自己定义-->
    &ltdiv class="test-named-color">测试有名颜色&lt/div>
    &lt!-- rgb,rgba颜色表示 -->
    &ltdiv class="test-rgb">测试rgb颜色&lt/div>
    &lt!--请设计div和class，探究长短16进制颜色表示 -->
    &ltdiv class="test-hex-color">&lt/div>
    &lt!--请设计div和class，探究hsl,hsla颜色表示 -->
    &ltdiv class="test-hsl">&lt/div>
    &lt!--请设计div和class，探究不透明度opacity 并和rgba\hsla做效果比较-->
    &ltdiv class="test-opacity">  &lt/div>
    &ltstyle>
        div {
            /* 给所有div中的文字一个统一的前景色 */
            border: 1px solid;
            margin-bottom: 6px;
            width: 200px;
            height: 100px;
            /* 画一个宽一些的边框，留意边框下的背景色 */
         
            /* div间隔 */
            
        }

        .test-opacity {
            background-color: red;
            transition: background-color 1s;
        }
        .test-opacity:hover{
            background-color: rgba(255, 0 0, 3);
        }
    &lt/style>
    </pre>





</body></html>